<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      样式重置：去掉网页中所有元素自带的内外边距
    */
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      background-color: #666;
      /* 
        flex布局：弹性盒子布局
        display: flex;  将盒子转换为弹性盒子
        justify-content: 调整内容的左右方向
        align-items: center; 让内容沿交叉轴居中
      */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #box {
      /* 浏览器可视区域的宽度 */
      width: 40vw;
      height: 40vw;
      background-image: linear-gradient(to right, #000 50%, #fff 50%);
      border-radius: 50%;
      /* border:2px solid red; */
      /* 
        margin:
          一个取值，表示同时设置四周
          两个取值，表示  上下， 左右
          三个取值，表示  上， 左右， 下
          四个取值：表示  上， 右， 下， 左
      */
    }


    /* 
      CSS选择器的优先级
        JS修改元素属性
        !important: 外挂：1000
        id选择器权重：100
        class选择器权重：10
        元素选择器权重：1
    
      复合选择器出现几个对应的选择器，就把对应选择器的权重值相加
    */
    #box > div {
      width: 20vw;
      height: 20vw;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box >.top {
      /* background-color: hotpink;  */
      background-color: #000; 
    }
    #box >.bottom {
      /* background-color: yellow; */
      background-color: #fff;
    }

    #box > div > div {
      width: 6vw;
      height: 6vw;
      border-radius: 50%;
    }

    #box > div > .innerTop {
      background-color: #fff;
    }

    #box > div > .innerBottom {
      background-color: #000;
    }


    /* 
      1、选择器的优先级
      2、通过优先级关系，可以把重复代码(冗余代码)提取出来一起设置，再分别设置不同点，重复出现2次或以上，就要提取
      3、样式重置
      4、flex弹性盒子布局的基本设置
    */
  </style>
</head>

<body>
  <div id="box">
    <div class="top">
      <div class="innerTop"></div>
    </div>
    <div class="bottom">
      <div class="innerBottom"></div>
    </div>
  </div>
</body>

</html>